<template>
    <view class="content">
        <view class="top">
            <image src="../../static/image/img_26.png" class="img-26"></image>
            <view class="top-right">
                <view class="text-llg text-bold">{{ data.goods_name }}</view>
                <view class="text-df text-gray">
                    <view class="u-p-t-15" v-if="data.dosage">剂型：{{ data.dosage }}</view>
                    <view class="u-p-t-15">规格：{{ data.goods_spec }}</view>
                    <view class="u-p-t-15">生产厂家：{{ data.factory }}</view>
                    <view class="u-p-t-15">采购数量：{{ data.goods_nums }}</view>
                </view>
            </view>
        </view>
        
        <view class="wrapper" v-for="(el, ind) in list" :key="ind">
            <view class="wrapper-item">
                <view class="item">
                    <view>批号</view>
                    <view class="item-r">
                        <input type="text" v-model="el.batch" placeholder="请输入" class="inp">
                    </view>
                </view>
                <view class="item">
                    <view>有效期是否到月</view>
                    <view class="item-r">
                        <view class="u-flex u-p-r-50" @click.stop="chooseIsCome(el)">
                            <image :src="el.isCome ? '../../static/icon/choose_01.png' : '../../static/icon/choose_02.png'" class="choose-01"></image>
                            <view>是</view>
                        </view>
                        <view class="u-flex" @click.stop="chooseIsCome(el)">
                            <image :src="!el.isCome ? '../../static/icon/choose_01.png' : '../../static/icon/choose_02.png'" class="choose-01"></image>
                            <view>否</view>
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view>生产日期</view>
                    <view class="item-r" @click="openStartTime(el)">
                        <input type="text" v-model="el.produce_date" placeholder="请选择" class="inp" disabled>
                        <image src="../../static/icon/time_02.png" class="time-02"></image>
                    </view>
                </view>
                <view class="item">
                    <view>有效日期</view>
                    <view class="item-r" @click="openEndTime(el)">
                        <input type="text" v-model="el.period_date" placeholder="请选择" class="inp" disabled>
                        <image src="../../static/icon/time_02.png" class="time-02"></image>
                    </view>
                </view>
                <view class="item">
                    <view>到货数量</view>
                    <view class="item-r">
                        <input type="number" v-model="el.take_nums" placeholder="请输入" class="inp">
                    </view>
                </view>
                <view class="item">
                    <view>拒收数量</view>
                    <view class="item-r">
                        <input type="number" v-model="el.refund_nums" placeholder="请输入" class="inp">
                    </view>
                </view>
                <view class="item" v-if="el.refund_nums > 0" @click="openRefundReason(el)">
                    <view>拒收原因</view>
                    <view class="item-r">
                        <input type="text" v-model="el.refund_reason" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
                    </view>
                </view>
                <!-- el.refund_nums > 0 && 拒绝原因选择其他时，要输入文字，如不输入 传 其他。 -->
                <view class="examine2 borders-bottom-gray" v-if="el.refund_nums > 0 && el.refund_is_show == 1">
                    <view>其他拒收原因</view>
                    <textarea v-model="el.refund_reason_other" maxlength="-1" :auto-height="true" placeholder="请输入其他拒收原因" class="t-inp"></textarea>
                </view>
                
                <view class="examine2 borders-bottom-gray">
                    <view>备注</view>
                    <textarea v-model="el.memo" maxlength="-1" :auto-height="true" placeholder="请输入" class="t-inp"></textarea>
                </view>
                <view class="examine2">
                    <view>上传图片</view>
                    <view class="img-box">
                        <view class="u-rela" v-for="(item, index) in el.file_imgs" :key="index">
                            <image :src="item" class="up-photo" @click="$previewImage(el.file_imgs, index)"></image>
                            <view class="del-img" @click.stop="$delImage(el.file_imgs, el.file_ids, index)">删除</view>
                        </view>
                        <image src="../../static/image/up.png" class="up-photo" @click="chooseImage(el)"></image>
                    </view>
                </view>
            </view>
            <view class="btns">
                <view class="del-btn" v-if="list.length > 1" @click="del(ind)">
                    <image src="../../static/icon/del.png" class="btn-icon"></image>
                    <view>删除</view>
                </view>
                <view class="add-btn" @click="add">
                    <image src="../../static/icon/add.png" class="btn-icon"></image>
                    <view>添加</view>
                </view>
            </view>
        </view>
        
        <view class="btn-square u-m-30" @click="$noMultipleClicks(doSubmitChild)">确认收货</view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
        <u-picker v-model="JStimeShowMonth" mode="time" :params="timeParamsMonth" @confirm="chooseTime(3, $event)"></u-picker>
        
        <!-- 拒绝原因 is_show=1是需要录入,0直接选择 -->
        <u-select v-model="show" mode="single-column" :list="option" value-name="id" label-name="name" @confirm="confirm"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick: true,//连点
                show: false,
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                JStimeShowMonth: false,
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { year: true, month: true, day: true, hour: false, minute: false, second: false },
                timeParamsMonth: { year: true, month: true, day: false, hour: false, minute: false, second: false },
                list: [{batch:'',isCome:0, produce_date:'', period_date:'', take_nums:'',refund_nums:'', refund_reason_id:'', refund_reason:'',refund_reason_other: '',refund_is_show: '',file_ids:[],file_imgs:[],memo: '', goods_nums: '' }],
                listItem: {},
                data: {},
                option: [],
            };
        },
        onLoad(option) {
            this.data = JSON.parse(decodeURIComponent(option.data));
            console.log(this.data)
            this.getOption()
        },
        methods: {
            // 确认收货
            doSubmitChild() {
                let isNull = false, isMinus = false, nums = 0
                this.list.forEach(cur => {
                    cur.goods_nums = this.data.goods_nums
                    if (!cur.batch || !cur.produce_date || !cur.period_date || !cur.take_nums) {
                        isNull = true
                    }
                    if (cur.refund_nums > 0 && !cur.refund_reason_id) {
                        isNull = true
                    }
                    if (cur.take_nums < 0 || cur.refund_nums < 0) {
                        isMinus = true
                    }
                    
                    nums = Number(nums) + Number(cur.take_nums) + Number(cur.refund_nums)
                })
                if (isNull) {
                    this.$toast('您有未填写的内容，请填写完整！')
                    return
                }
                if (isMinus) {
                    this.$toast('数量不可以是负数！')
                    return
                }
                
                if (nums != this.data.goods_nums) {
                    this.$toast('和采购数量不一致')
                    return
                }
                
                this.list.forEach(cur => {
                    if (!isNull && !isMinus && cur.refund_nums > 0 && cur.refund_reason_id && cur.refund_is_show == 1) {
                        cur.refund_reason = cur.refund_reason_other ? cur.refund_reason_other : '其他'
                    }
                })
                console.log(this.list)
                
                this.$ajax('inventory_put/take', {
                    userToken: this.$getSync('userToken'),
                    belong_id: this.data.belong_id, //数据编号
                    type: this.data.type, //收货订单类型 1-采购 2-销售退货
                    belong: this.data.belong, //编号
                    goods_id: this.data.goods_id, //商品编号
                    goods_name: this.data.goods_name, //商品名称
                    batch_array: this.list,
                }).then(ret => {
                	if (ret.status == 0) {
                        this.$toast('提交成功')
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            openRefundReason(el) {
                this.listItem = el
                this.show = true
            },
            
            confirm(e) {
                console.log(e);
                this.listItem.refund_reason = e[0].label
                this.listItem.refund_reason_id = e[0].value
                this.option.forEach(cur => {
                    if (cur.id == e[0].value) {
                        this.listItem.refund_is_show = cur.is_show
                    }
                })
            },
            
            // 获取拒绝原因
            getOption() {
                this.$ajax('inventory_put/get_reason', {
                    userToken: this.$getSync('userToken'),
                    type: 1,
                }).then(ret => {
                	if (ret.status == 0) {
                        this.option = ret.data
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            // 有效期是否到月，是的时候，有效日期格式是 年-月。
            chooseIsCome(el) {
                el.period_date = ''
                el.isCome = el.isCome == 1 ? 0 : 1
            },
            
            openEndTime(el) {
                this.listItem = el
                if (el.isCome == 1) {
                    this.JStimeShowMonth = true
                } else {
                    this.JStimeShow = true
                }
            },
            
            openStartTime(el) {
                this.listItem = el
                this.KStimeShow = true
            },
            
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.listItem.produce_date = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.listItem.period_date = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 3) {
                    this.listItem.period_date = e.year + '-' + e.month
                }
            },
            
            // 添加
            add() {
                this.list.push({batch:'',isCome:0, produce_date:'', period_date:'', take_nums:'',refund_nums:'', refund_reason_id:'', refund_reason:'',refund_reason_other: '',refund_is_show: '',file_ids:[],file_imgs:[],memo: '', goods_nums: this.data.goods_nums })
            },
            
            // 删除
            del(ind) {
                this.list.splice(ind, 1)
            },
            
            chooseImage(item) {
                uni.chooseImage({
                    count: 9, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                    success: (res) => {
                        const tempFilePaths = res.tempFilePaths;
                        for (let i = 0; i < tempFilePaths.length; i++) {
                            this.$upLoadPic(res.tempFilePaths[i]).then(ret => {
                                console.log(ret)
                                item.file_ids.push({value: ret.data.id})
                                item.file_imgs.push(ret.data.attach_uri)
                            });
                        }
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #f5f5f5 !important;
    }
    
    .top{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 40rpx 30rpx;
        background-color: #fff;
        margin-bottom: 30rpx;
    }
    .img-26{
        width: 95rpx;
        height: 95rpx;
        margin-right: 25rpx;
    }
    .top-right{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    
    
    .wrapper{
        padding: 0 30rpx;
    }
    .wrapper-item{
        padding: 0 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-r{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 20rpx;
    }
    .inp{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        text-align: right;
    }
    .choose-01{
        width: 33rpx;
        height: 33rpx;
        margin-right: 15rpx;
    }
    .time-02{
        width: 33rpx;
        height: 34rpx;
        margin-left: 15rpx;
    }
    .btns{
        padding: 20rpx 0 35rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
    }
    .btns>view{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15rpx 30rpx;
        border-radius: 10rpx;
    }
    .btn-icon{
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
    }
    .del-btn{
        background-color: #bfbfbf;
    }
    .add-btn{
        background-color: #ff4800;
        margin-left: 20rpx;
    }
    
    .box{
        margin: 0 30rpx;
        padding: 0 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .examine2{
        padding: 30rpx 0;
    }
    .t-inp{
        width: 100%;
        min-height: 150rpx;
        height: auto;
        padding-top: 15rpx;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .up-photo{
        width: 187rpx;
        height: 187rpx;
        margin-right: 15rpx;
        margin-top: 15rpx;
    }

</style>
